<template>
  <div class="app-container">
    <div class="config-box">
      <div class="config-title">添加/修改管理员</div>
      <div class="tabs-box" style="padding:0 20px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本设置" name="first" />
          <el-tab-pane label="开发设置" name="second" />
          <el-tab-pane label="支付配置" name="third" />
          <el-tab-pane label="菜单设置" name="fourth" />
        </el-tabs>
      </div>
      <div class="config-form-div">
        <!-- size用于控制该表单内组件的尺寸值为medium / small / mini -->
        <el-form :model="form" :label-position="labelPosition" label-width="80px">
          <div v-if="activeName=='first'">
            <el-form-item label="应用名称">
              <el-input v-model="form.app_title" class="form-input" placeholder="请输入应用名称" />
            </el-form-item>
            <el-form-item label="应用ID">
              <el-input v-model="form.app_id" class="form-input" placeholder="请输入应用ID" />
            </el-form-item>
            <el-form-item label="应用秘钥">
              <el-input v-model="form.app_secret" class="form-input" placeholder="请输入应用秘钥" />
            </el-form-item>
          </div>
          <div v-if="activeName=='second'">
            <el-form-item label="对接地址">
              <el-input v-model="form.app_url" class="form-input" :readonly="true" placeholder="请输入对接地址" />
            </el-form-item>
            <el-form-item label="token值">
              <el-input v-model="form.app_token" class="form-input" placeholder="请输入token值" />
            </el-form-item>
            <el-form-item label="解密秘钥">
              <el-input v-model="form.encodingAesKey" class="form-input" placeholder="请输入解密秘钥" />
            </el-form-item>
            <el-form-item label="消息加密">
              <el-switch
                v-model="form.message_encrypt"
                class="config-switch"
                inactive-color="#aaa"
                inactive-text="false"
                inactive-value="0"
                active-color="#5FB878"
                active-text="true"
                active-value="1"
                :width="52"
                @change="change"
              />
            </el-form-item>
          </div>
          <div v-if="activeName=='third'">
            <el-form-item label="商户ID">
              <el-input v-model="form.wx_mchid" class="form-input" placeholder="请输入商户ID" />
            </el-form-item>
            <el-form-item label="支付秘钥">
              <el-input v-model="form.wx_key" class="form-input" placeholder="请输入支付秘钥" />
            </el-form-item>
            <el-form-item label="证书文件">
              <el-input v-model="form.keystore_file_name" class="form-input" placeholder="请输入文件名" />
              <div style="color:red;font-size:13px">为了安全文件请自行复制到 resources/weixin/cer 目录下面，这里直接写文件名称</div>
            </el-form-item>
            <el-form-item label="证书秘钥">
              <el-input v-model="form.keystore_password" class="form-input" placeholder="请输入证书秘钥" />
              <div style="color:red;font-size:13px">*.填写商户号即可</div>
            </el-form-item>
          </div>
          <div v-if="activeName=='fourth'">
            <el-form-item label-width="0px">
              <div style="font-size:30px;color:#333">请先保存其他设置，再来设置菜单</div>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { saveConfig } from '@/api/wx'

export default {
  data() {
    return {
      form: {
        app_title: '', // 应用名称
        app_id: '', // 应用ID
        app_secret: '', // 应用秘钥
        app_url: '保存以后即可查看到保存地址', // 对接地址
        app_token: '', // token值
        encodingAesKey: '', // 解密秘钥
        message_encrypt: '0', // 消息是否加密 0 否 1 是
        wx_mchid: '', // 商户id
        wx_key: '', // 支付秘钥
        keystore_file_name: '', // 证书文件
        keystore_password: '' // 证书秘钥
      },
      id: '',
      activeName: 'first',
      labelPosition: 'right' // label对齐方式，可选值为right、top、left
    }
  },
  mounted() {},
  methods: {
    /* eslint-disable */   //如果要eslint验证，请把这段代码删掉

    // 创建
    onSubmit() {
      if (!this.form.app_title) {
        this.$message.error('请输入应用名称!')
        return
      }
      if (!this.form.app_id) {
        this.$message.error('请输入应用ID!')
        return
      }
      if (!this.form.app_secret) {
        this.$message.error('请输入应用秘钥!')
        return
      }
      if (!this.form.app_token) {
        this.$message.error('请输入token值!')
        return
      }
      if (!this.form.message_encrypt) {
        this.$message.error('请输入解密秘钥!')
        return
      }
      if (!this.form.wx_mchid) {
        this.$message.error('请输入商户id!')
        return
      }
      if (!this.form.wx_key) {
        this.$message.error('请输入支付秘钥!')
        return
      }
      if (!this.form.keystore_file_name) {
        this.$message.error('请输入证书文件!')
        return
      }
      if (!this.form.keystore_password) {
        this.$message.error('请输入证书秘钥!')
        return
      }
      console.log(this.form)

      let data={}
      data['cfg.id']=this.id
      data['cfg.app_title']=this.form.app_title
      data['cfg.app_id']=this.form.app_id
      data['cfg.app_secret']=this.form.app_secret
      data['cfg.token']=this.form.app_token
      data['cfg.message_encrypt']=this.form.message_encrypt
      data['cfg.encodingAesKey']=this.form.encodingAesKey
      data['cfg.wx_mchid']=this.form.wx_mchid
      data['cfg.wx_key']=this.form.wx_key
      data['cfg.keystore_file_name']=this.form.keystore_file_name
      data['cfg.keystore_password']=this.form.keystore_password

      this.save(data)
    },

    // 保存用户信息函数
    save(data){
      saveConfig(data).then(res=>{
        if(res.state){
          this.$message({ message: res.msg, type: 'success', duration: 2000 })
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.push({path:'/wx/config-list'})
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    // tabs选中
    handleClick(tab) {
      console.log(tab.name);
      this.activeName=tab.name
    },

    // 状态改变
    change(val) {
      // console.log(val)
      this.form.message_encrypt = val
    },

    // 返回页面
    back(){
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({path:'/wx/config-list'})
    },

  }
}
</script>

<style  lang="scss" scoped>
.config-box{
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.12);
  background: #fff;

  .config-title{
    font-size: 16px;
    color: #333;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .config-form-div{
    padding: 16px 20px;

    .form-input{
      width: 480px;
    }
  }
}
</style>

<style lang="scss">
.config-form-div{
   label{
    font-weight: 500;
  }
  .el-form-item__label{
    font-size: 15px;
    color: #333;
  }
}

.config-switch{
  .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }

  /*打开时文字位置设置*/
  .el-switch__label--right {
    z-index: 1;
    left: -6px;
  }

  /*关闭时文字位置设置*/
  .el-switch__label--left {
    z-index: 1;
    right: -5px;
  }

  /*显示文字*/
  .el-switch__label.is-active {
    display: block;
  }
}
</style>

